<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="showTel">Show Tel</button>
    <button @click="modifyName">Modify Name</button>
    <button @click="modifyAgeAdd">Modify Age Add</button>
    <button @click="modifyAgeSub">Modify Age Sub</button>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'Person',
  setup() {
    let name = ref('张三')
    let age = ref(25) // 默认年龄为
    function showTel() {
      alert('电话：13800138000')
    }
    function modifyName() {
      name.value = '李四' // 修改姓名
    }
    function modifyAgeAdd() {
      age.value = age.value + 1 // 修改年龄
    }
    function modifyAgeSub() {
      age.value = age.value - 1 // 修改年龄
    }
    return {
      name,
      age,
      showTel,
      modifyName,
      modifyAgeAdd,
      modifyAgeSub
    }
  }
}
</script>

<style scoped>
.person {
  background-color: rgb(255, 0, 208);
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin-right: 10px;
  background-color: aqua;
}
</style>
